<!--
 * @Author: wangwenshuai 644586996@qq.com
 * @Date: 2022-11-11 21:43:48
 * @LastEditors: wangwenshuai 644586996@qq.com
 * @LastEditTime: 2022-11-14 16:23:23
 * @FilePath: \carbon-pccounting-project\src\views\Index\Index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="calc_height" v-title data-title="后羿零碳">
    <div class="bg" :style="{ filter: `blur(${filterVal}px)` }"></div>
    <AccountingTask></AccountingTask>
  </div>
</template>

<script>
import { Mixin } from "@/mixins/mixin.js";
import AccountingTask from "@/views/CarbonAccounting/accountingtask";
export default {
  mixins: [Mixin],
  data() {
    return {
      filterVal: 10,
    };
  },
  components: {
    AccountingTask,
  },
  watch: {
    stepsCurrent(val) {
      this.filterVal = 10 - val * 3;
    },
  },
};
</script>

<style lang="scss">
.calc_height {
  padding: 70px 0 30px;
  // height: calc(100vh - 20px);
  width: 100%;
  position: relative;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-image: url("../../assets/img/bj2.jpg");
  background-size: 120% 120%;
  transition: 1s;
}
</style>